Ext.define("App.reportconfiguration.chartconfiguration.view.ChartConfigurationEditor", {
    extend: 'Extend.window.FormWindow',
    alias: 'widget.ChartConfigurationEditor',
    requires: ['App.kpiconfiguration.view.KpiConfigurationList',
        'App.reportconfiguration.chartconfiguration.model.SeriesModel',
        'App.reportconfiguration.chartconfiguration.model.AxisModel',
        'App.reportconfiguration.field.AxisTypeComboBox',
        'App.reportconfiguration.field.AxisPositionComboBox',
        'App.reportconfiguration.chartconfiguration.field.AxisGridField',
        'App.reportconfiguration.chartconfiguration.field.SeriesGridField'],
    controller: 'ChartConfigurationEditorController',
    isValid: function () {
        var valid = this.callParent(arguments);
        if (valid == true) {
            var AxisGridField = this.down('AxisGridField');
            var store = AxisGridField.getStore();
            for (var i = 0; i < store.getCount(); i++) {
                var record = store.getAt(i);
                var validation = record.getValidation();
                var valid = validation.isValid();
                if (valid == false) {
                    this.down('tabpanel').setActiveItem(AxisGridField);
                    AxisGridField.findPlugin('extendrowediting').startEdit(record, 1);
                    return false;
                }
            }
            var SeriesGridField = this.down('SeriesGridField');
            var store = SeriesGridField.getStore();
            for (var i = 0; i < store.getCount(); i++) {
                var record = store.getAt(i);
                var validation = record.getValidation();
                var valid = validation.isValid();
                if (valid == false) {
                    this.down('tabpanel').setActiveItem(SeriesGridField);
                    SeriesGridField.findPlugin('extendrowediting').startEdit(record, 1);
                    return false;
                }
            }
        }
        return valid;
    },
    config: {
        window: {
            title: '图配置编辑',
            buttons: {
                save: {
                    text: '确定',
                    handler: function () {
                        var me = this;
                        var form = me.up('window').down('panel');
                        if (form.isValid()) {
                            var chartConfiguration = form.chartConfiguration;
                            var data = form.getDatas();
                            var record = Ext.create(form.model, data);
                            var id = record.get('id');
                            var isAdd = id.indexOf('-') > -1;
                            record.set('id', id.replace(/-/g, ''));
                            if (isAdd == true) {
                                chartConfiguration.getStore().insert(0, record);
                            } else {
                                var record = form.record;
                                for (key in data) {
                                    record.set(key, data[key]);
                                }
                                for (key in record.data) {
                                    if (Ext.isEmpty(data[key])) {
                                        record.set(key, null);
                                    }
                                }
                            }
                            form.close();
                        }
                    }
                }
            }
        }
    },
    defaults: {
        columnWidth: 1, labelWidth: 70
    },
    items: [
        {
            xtype: 'hidden',
            name: 'id'
        },
        {
            name: 'title',
            fieldLabel: '名称',
            allowBlank: false,
            xtype: 'textfield',
            blankText: '名称为必填字段，不能为空！',
            beforeLabelTextTpl: ['<span style="color:red;">*</span>']
        }, {
            xtype: 'numberfield',
            name: 'width',
            columnWidth: .2,
            fieldLabel: '宽度(占比)',
            maxValue: 1,
            minValue: 0,
            value: 1,
            allowBlank: false,
            blankText: '高度为必填字段，不能为空！',
            beforeLabelTextTpl: ['<span style="color:red;">*</span>']
        }, {
            xtype: 'numberfield',
            name: 'height',
            columnWidth: .2,
            fieldLabel: '高度(px)',
            minValue: 0,
            value: 400,
            allowBlank: false,
            blankText: '高度为必填字段，不能为空！',
            beforeLabelTextTpl: ['<span style="color:red;">*</span>']
        }, {
            xtype: 'ChartThemeComboBox',
            name: 'theme',
            columnWidth: 0.2,
            fieldLabel: '主题',
            value: 'customtheme'
        }, {
            xtype: 'checkbox',
            name: 'stereoscopic',
            fieldLabel: '3D',
            columnWidth: .2,
            inputValue: true,
            uncheckedValue: false,
            listeners: {
                change: 'onStereoscopicChange'
            }
        }, {
            xtype: 'checkbox',
            name: 'pie',
            fieldLabel: '饼图',
            columnWidth: .2,
            inputValue: true,
            uncheckedValue: false,
            listeners: {
                change: 'onPieChange'
            }
        }, {
            xtype: 'textfield',
            name: 'description',
            fieldLabel: '描述',
            maxLength: 128
        }, {
            xtype: 'tabpanel',
            region: 'center',
            height: 305,
            items: [{
                title: '轴配置',
                xtype: 'AxisGridField',
                name: 'axes',
                model: 'App.reportconfiguration.chartconfiguration.model.AxisModel',
                listeners: {
                    edit: 'onAxisEndRowEdit'
                }
            }, {
                title: 'SERIES配置',
                xtype: 'SeriesGridField',
                name: 'series',
                model: 'App.reportconfiguration.chartconfiguration.model.SeriesModel'
            }]
        }
    ],
    listeners: {
        afterrender: function () {
            var me = this;
            if (!Ext.isEmpty(me.record)) {
                var pieCheckbox = me.down('checkbox[name="pie"]');
                pieCheckbox.containsFocus = 'init';
                pieCheckbox.fireEvent('change', pieCheckbox, me.record.get('pie'))
            }
        }
    }
})


Ext.define('App.reportconfiguration.chartconfiguration.view.ChartConfigurationEditorController', {
    extend: 'Ext.app.ViewController',
    alias: 'controller.ChartConfigurationEditorController',
    init: function (view) {
    },
    onAxisEndRowEdit: function (editor, context, eOpts) {
        this.getView().down('SeriesGridField').checkDatas(context.store)
    },
    onPieChange: function (combobox, nv, ov) {
        /*饼图与普通图切换*/
        var me = this;
        var SeriesGridField = me.getView().down('SeriesGridField');
        var AxisGridField = me.getView().down('AxisGridField');
        var changeHandler = function () {
            if (nv == true) {
                if (combobox.containsFocus == true) {
                    AxisGridField.getStore().removeAll();
                    SeriesGridField.getStore().removeAll();
                }
            } else {
                if (combobox.containsFocus == true) {
                    SeriesGridField.getStore().removeAll();
                }
            }
            //更新SERICES表列数据
            var updateColumns = function () {
                var columns = SeriesGridField.getColumns();
                Ext.Array.each(columns, function (column) {
                    if (column.dataIndex == 'axis') {
                        if (nv == true) {
                            column.disable();
                            if (!Ext.isEmpty(column.getEditor)) {
                                column.getEditor().disable();
                            }
                        } else {
                            column.enable();
                            if (!Ext.isEmpty(column.getEditor)) {
                                column.getEditor().enable();
                            }
                        }
                    }
                });
            }

            updateColumns();
        }
        /*3D图与普通图切换*/
        if (combobox.containsFocus == true) {
            if (nv == true && (AxisGridField.getStore().getCount() > 0 || SeriesGridField.getStore().getCount() > 0)) {
                Ext.Msg.confirm('确认', '切换成饼图时将自动清理轴配置及SERIES中的所有数据，是否继续？', function (opt) {
                    if (opt == 'yes') {
                        changeHandler();
                    } else {
                        combobox.suspendEvent('change');
                        combobox.setValue(false);
                        combobox.resumeEvent('change');
                    }
                });
            } else {
                changeHandler();
            }
        } else if (combobox.containsFocus == 'init') {
            changeHandler();
        }
    },
    onStereoscopicChange: function (combobox, nv, ov) {
        var me = this;
        var changeHandler = function () {
            var SeriesGridField = me.getView().down('SeriesGridField');
            var AxisGridField = me.getView().down('AxisGridField');
            SeriesGridField.findPlugin('extendrowediting').cancelEdit();
            AxisGridField.findPlugin('extendrowediting').cancelEdit();
            if (nv == true) {
                if (!Ext.isEmpty(AxisGridField)) {
                    AxisGridField.getStore().each(function (record) {
                        record.set('type', record.get('type') + '3d');
                    })
                }
                var seriesStore = SeriesGridField.getStore();
                var removes = [];
                seriesStore.each(function (record) {
                    if (record.get('type') == 'bar' || record.get('type') == 'pie') {
                        record.set('type', record.get('type') + '3d');
                    } else {
                        removes.push(record);
                    }
                })
                seriesStore.remove(removes);
            } else {
                if (!Ext.isEmpty(AxisGridField)) {
                    AxisGridField.getStore().each(function (record) {
                        record.set('type', record.get('type').replace(/3d/g, ''));
                    })
                }
                var seriesStore = SeriesGridField.getStore();
                seriesStore.each(function (record) {
                    if (record.get('type') == 'bar3d' || record.get('type') == 'pie3d') {
                        record.set('type', record.get('type').replace(/3d/g, ''));
                    }
                })
            }
        }
        /*3D图与普通图切换*/
        if (combobox.containsFocus == true) {
            if (nv == true) {
                Ext.Msg.confirm('确认', '切换成3D图时将自动清理SERIES中不支持的配置，是否继续？', function (opt) {
                    if (opt == 'yes') {
                        changeHandler();
                    } else {
                        combobox.setValue(false);
                    }
                });
            } else {
                changeHandler();
            }
        }

    }
})


/*图类型下拉框*/
Ext.define('App.reportconfiguration.chartconfiguration.view.ChartThemeComboBox', {
    extend: 'Ext.form.field.ComboBox',
    alias: 'widget.ChartThemeComboBox',
    editable: false,
    queryMode: 'local',
    valueField: 'value',
    displayField: 'name',
    store: {
        fields: ['name'],
        data: [{name: 'default', value: 'customtheme'},
            {name: 'shine', value: 'shine'},
            {name: 'base', value: 'customtheme'}]
    }
})